<template>
    <div class="big">
        <div class="top">
            <span>客服</span>
            <span>设置</span>
        </div>
        <div class="rot">
            <div class="img">
                <span class="tleft">111</span>
            </div>
            <div class="text">
            <div class="rtop">
                <span>Qt1321654</span>
            </div>
            <div class="rbottom">
                <span class="left">提升实名登记</span>
                <span>成长值</span>
            </div>
            </div>
        </div>
        <div class="bottom">
            <span>购物车</span>
            <span>收藏</span>
            <span>足迹</span>
            <span>红包/卡卷</span>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .tleft{
        background-color: darkgrey;
        border-radius: 50%;
    }
    .text{
        margin-left: 7%;
        width: 100%;
    }
    .img{
        margin-top: 5%;
    }
    .left{
        margin-right: 2%;
    }
    .rbottom span{
        font-size: 0.2rem;
        background-color: rgba(169, 169, 169, 0.562);
        border-radius: 1rem;
    }
    .rtop{
        padding: 2% 0;
    }
    .rot{
        margin-left: 5%;
        display: flex;
    }
    .big{
        background-color: yellow;
        width: 100%;
    }
    .top{
        display: flex;
        flex-direction: row-reverse
    }
    .top span{
        margin-right: 8%;
        font-size: 0.25rem;
        padding: 3% 0;
    }
    .bottom{
        display: flex;
        justify-content: space-around;

    }
    .bottom span{
        font-size: 0.25rem;
        padding: 3% 0;
    }
</style>
